<template>
  <div>
    <p class="container--item__header">
      <span class="container--item__journalism">视频</span>
    </p>
    <div class="container--item__BScrooll">
      <ul class="container--item">
        <li v-for="(item, key) in video" :key="key" @click = 'color(item, key)' :class = " key === index ? 'red' : ''">{{item.name}}</li>
        <transition name = "hr">
          <li :style = "{left: index*16.66666667 + 'vw' }" class="container--item__hr"></li>
        </transition>
      </ul>
    </div>
    <div class="container--bottom">
      <div class="container--item__bottom homepage" @click="pageText">
        <img src="../assets/imges/page.png" alt="#"><br>
        <span>首页</span>
      </div>
      <div class="container--item__bottom design">
        <img src="../assets/imges/design2.png" alt="#"><br>
        <span class="container--bottom__home">视频</span>
      </div>
      <div class="container--item__bottom set" @click = 'set'>
        <img src="../assets/set.png" alt="#"><br>
        <span>设置</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'videos',
  data () {
    return {
      video: [
        { name: '推荐', componentName: 'recommend', type: 'top' },
        { name: '影视', componentName: 'movie', type: 'shehui' },
        { name: '搞笑', componentName: 'cold', type: 'xiaohua' },
        { name: '娱乐', componentName: 'recreation', type: 'guoji' },
        { name: '综艺', componentName: 'variety', type: 'tiyu' },
        { name: '娱乐', componentName: 'recreation', type: 'yule' },
        { name: '财经', componentName: 'finance', type: 'caijing' },
        { name: '科技', componentName: 'science', type: 'keji' },
        { name: '军事', componentName: 'military', type: 'junshi' },
        { name: '汽车', componentName: 'automobile', type: 'qiche' },
        { name: '游戏', componentName: 'game', type: 'youxi' },
        { name: '时尚', componentName: 'fashion', type: 'shishang' },
        { name: '国内', componentName: 'inland', type: 'guonei' }
      ],
      index: 0
    }
  },
  methods: {
    color (item, key) {
      // this.$refs.con.classList.remove('slideInLeft')
      this.index = key
      // this.$router.push({name: this.video[key].componentName})
      if (key >= 3 && key <= this.video.length - 3) {
        this.scroller.scrollTo((key - 2.5) * -62.53, 0, 200)
      } else if (key === 2) {
        this.scroller.scrollTo((key - 2) * -62.53, 0, 200)
      } else if (key === 1) {
        this.scroller.scrollTo((key - 1) * -62.53, 0, 200)
      } else if (key === 11) {
        this.scroller.scrollTo((key - 4) * -62.53, 0, 200)
      }
      // this.$http.get('http://localhost:81/data', { params: { key: 'bab4507ad018f2d4eadd583ffa32ce64', type: this.video[key].type } })
      //   .then((data) => {
      //     let datas = JSON.parse(data.data.body).result.data
      //     this.$bus.$emit('datas', datas)
      //   }).catch((e) => {
      //     console.log(e)
      //   })
      // this.$refs.con.classList.add('slideInLeft')
    },
    pageText () {
      this.$router.push({name: 'top'})
      this.$bus.$emit('page')
    },
    set () {
      this.$router.push({name: 'set'})
      this.$bus.$emit('set')
    }
  },
  mounted () {
    /* eslint-disable */
    this.scroller = new this.$BS('.container--item__BScrooll', {
      scrollX: true,
      scrollY: false,
      click: true
    })
  },
}
</script>

<style lang="scss" scoped>
  *{
    margin: 0;
    padding: 0;
    font-size: 0;
  }
  .container--item__header{
    background: #fff;
    z-index: 999;
    line-height: 1.56rem;
    text-align: center;
    .container--item__journalism{
      font-size: .506666667rem;
      color: #151515;
    }
  }
  .container--item__BScrooll{
    position: relative;
    width: 100vw;
    height: 1.0666666rem;
    overflow: hidden;
    .container--item{
      background: #fff;
      border-bottom: 1px solid #e0e0e0;
      box-sizing: border-box;
      z-index: 999;
      list-style: none;
      height: inherit;
      width: 216.6666667vw;
      .red{
        color: #d73737;
        font-size: .466666667rem;
      }
      li{
        color: #757575;
        display: inline-block;
        text-align: center;
        font-size: .4rem;
        width: 16.66666667vw;
        line-height: 40px;
      }
      .container--item__hr{
        width: 16.66666667vw;
        height: 2px;
        border-radius: 1px;
        position: absolute;
        left: 0;
        bottom: 0;
        transition: left .3s ease-in-out;
        &::before{
          content: '';
          display: inline-block;
          background: #d73737;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: .555555557rem;
        }
      }
    }
  }
  .container--bottom{
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100vw;
    background: #fff;
    z-index: 999;
    line-height: 1.3333333333rem;
    border-top: 1px solid #e0e0e0;
    .homepage{
      position: absolute;
      left: 1.373333333rem;
      top: .333333333333rem;
    }
    .design{
      margin-top: .333333333333rem;
    }
    .set{
      position: absolute;
      top: .333333333333rem;
      right: 1.373333333rem;
    }
    .container--item__bottom{
      line-height: 0;
      display: inline-block;
      .container--bottom__home{
        line-height: 1rem;
        color: #d73737;
      }
      img{
        width: .6rem;
        height: .6rem;
      }
      span{
        line-height: 1rem;
        font-size: .293333333rem;
      }
    }
  }
</style>
